<template>
  <div class="cart">
    <div class="wrap">
    </div>
    <!-- </div> -->
     <div class="mean">
     <div class="m">
      <img src="@/assets/6.png" alt="">
      <span>PRODUCT</span>
      <span class="p1"><router-link to="/category" tag="span">产品类别</router-link></span>
    </div>
    <div class="m">
      <img src="@/assets/7.png" alt="">
      <span>SKIN CARE</span>
      <span class="p1">护肤系列</span>
    </div>
    <div class="m">
      <img src="@/assets/8.png" alt="">
      <span>BEST PROJ</span>
      <span class="p1">畅销产品</span>
    </div>
    <div class="m">
      <img src="@/assets/9.png" alt="">
      <span>PREFERENT</span>
      <span class="p1">特惠专区</span>
    </div>
  </div>
  <div class="hot">
    <div class="tit">EVENTS</div>
    <p>热门活动</p>
  </div>
  <div class="center-banner">
    <img src="https://www.innisfree.cn/staticfiles/image/90/02/a8/6196e10c654cb7789c22335371.jpg" alt="">
  </div>
  <div class="list-banner">
  <div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"
    v-for="banner in (bannerlist? bannerlist[0].productItems : [])"
    :key="banner.prdName"
    >
    <img :src="banner.largeThumbnails" alt="" >
   <p>{{banner.prdName}}</p>
   <span>￥{{banner.salPrice}}</span>
   <i></i>
    </div>
  </div>
</div>
  </div>
</div>
</template>

<script>
import { getMainBanner, getCenterBanner } from '@/api/shopCart'
import Swiper from 'swiper'
import 'swiper/swiper.scss'
export default {
  name: 'Cart',
  data () {
    return {
      banners: [],
      bannerlist: []
    }
  },
  created () {
    getMainBanner().then(res => {
      console.log(res)
    })
    getCenterBanner().then(res => {
      console.log(res)
      this.bannerlist = res
      this.$nextTick(() => {
        /* eslint-disable-next-line */
          new Swiper('.swiper-container', {
          autoplay: true,
          loop: true, // 循环模式选项
          slidesPerView: 3,
          slidesPerGroup: 3,
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  width:100%;
  height: 256px;
  border: 1px solid;
}
    .mean{
      width: 100%;
      height:150px;
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      .m{
        width: 86px;
        height: 81px;
        display: flex;
        flex-direction: column;
        img{
          width: 52px;
          height: 52px;
          margin-left: 14px;
        }
        span{
          color:#898587;
          font-size: 12px;
          line-height: 10px;
          margin-left: 15px;
          margin-top: 5px;
          font-family: SourceHanSansCN;
          font-weight: bolder;
        }
        .p1{
          margin-top: 5px;
          font-size: 12px;
          line-height: 12px;
          color: #898587;
          font-family: SourceHanSansCN;
          font-weight: bolder;
          margin-left: 22px;
        }
      }
    }
   .hot{
     margin-top: -20px;
     margin-left: 20px;
     .tit{
       font-size: 23px;
        font-family: Century Gothic;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        text-transform: uppercase;
        color: #3e4147;
     }
     p{
       font-size: 17px;
        font-weight: 500;
        line-height: 17px;
        letter-spacing: 2px;
        color: #3e4147;
        text-align: left;
       margin-top: 5px
     }
   }
   .center-banner{
      width: 100%;
       margin-top: 20px;
       img{
       width: 100%;
       height: 100%;
       }
     }
     .list-banner{
       width: 100%;
       display: flex;
       margin-top: 20px;
       .swiper-container {
      width: 100%;
      padding-top: calc(100% * 139 / 139);
      position: relative;
      .swiper-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .swiper-slide{
          width: 170px;
          height: 230px;
           border: 1px solid rgba(137,133,135,.3);
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          img{
            width: 110px;
            height: 110px;
            margin-left: 8px;
          }
          p{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
            word-break: break-all;
            color: #3e4147;
            font-family: SourceHanSansCN;
            -webkit-line-clamp: 2;
           height: 3em;
           font-size: 14px;
           margin: 10px 10px 35px 10px;
          }
          span{
           font-size: 20px;
          //  font-weight: bolder;
           color:#024137
          }
        }
      }
    }
     }

</style>
